<template>
    <div>
        <Alert v-if="!isquery" class="padding-15" show-icon>操作提示：带有”<span class="color-danger">*</span>“的选项为必填项，其他为选填项。</Alert>
        <compWrapper title="基本信息" theme="primary">
			<compFormEdit class="margin-top-15 margin-right-15" ref="editform" :formdata="getBase" v-model="formData" :labelWidth="120"/>
		</compWrapper>
        <compWrapper title="地址信息" theme="info" >
			<compFormEdit class="margin-top-15 margin-right-15" ref="editform" :formdata="getShip" v-model="formData" :labelWidth="120"/>
            <div v-if="!isquery" class="text-right" >
                <Button class="margin-right-10" type="primary" @click="submit">保存</Button>
                <Button class="" @click="cancel">返回</Button>
            </div>
		</compWrapper>
        <record :id="id" />
        <Spin v-if="loading" fix></Spin>
    </div>
</template>

<script>
import { HttpSaveShipper, HttpSaveShipperManage, HttpShipper } from '@/service/api/views';
import record from '@/views/record';
import { mapState,mapGetters } from 'vuex'

export default {
    props:['activeid','querytype','ismanage'],
    data(){
        return {
            isquery: (this.$route.query.type || this.querytype) === 'query',
            ismanage: this.$route.query.ismanage || this.ismanage,
			id: this.$route.params.id || this.activeid,
			loading:true,
			formData: {
				contactName: '',
				code: '',
				active: 0,
                organizationId:'',
				countrycode: '',
				state: '',
				city: '',
				zipcode: '',
				addressLine1: '',
                contactPhone: '',
				remark: '',
			},
			rulevalid: {},
        }
    },
    created() {
        this.getDetail();
    },
    components: {
        record,
    },
    computed:{
        ...mapGetters('dictionary', ['getSysAllList','getCountryList']),
        getBase(){
            return [
                {
                    label: "发货方名称",
                    key: "contactName",
                    query:this.isquery,
                    
                }, {
                    label: "发货方CODE:",
                    key: "code",
                    query:true,
                },
                {
                    label: "状态",
                    key: "active",
                    tag:'Select',
                    options: [
                        {value:1,label:'启用'},
                        {value:0,label:'禁用'},
                    ],
                    query:this.isquery,
                },
            ]
        },
        getShip(){
            return [
                {
                    label: "组织",
                    show:this.ismanage === 1,
                    key: "organizationId",
                    tag:'Select',
                    options: this.getSysAllList,
                    props:{
                        filterable:true,
                    },
                    query:this.isquery,
                },
                {
                    label: "国家",
                    key: "countrycode",
                    tag:'Select',
                    query:this.isquery,
                    options:this.getCountryList
                }, 
                {
                    label: "州:",
                    key: "state",
                    query:this.isquery,
                },
                {
                    label: "城市:",
                    key: "city",
                    query:this.isquery,
                },
                {
                    label: "邮编:",
                    key: "zipcode",
                    query:this.isquery,
                },
                {
                    label: "详细地址:",
                    key: "addressLine1",
                    query:this.isquery,
                },
                {
                    label: "联系电话:",
                    key: "contactPhone",
                    query:this.isquery,
                },
                {
                    label: "备注:",
                    key: "remark",
                    required:false,
                    query:this.isquery,
                },
            ]
        }
    },
    methods:{
		cancel() {
			setTimeout(() => {
				this.$router.push({ name: 'addressShipper' });
			}, 1000);
		},

		async submit() {
            let valid = await this.$refs['editform'].validate();
			if (!valid) return;
            this.loading = true;
            if(this.ismanage == 1){
                HttpSaveShipperManage(this.formData).then(res => {
                    this.cancel();
                    this.$Message.success(res.message);
                }, err => {
                    this.$Message.error(err.message);
                }).finally(result => {
                    this.loading = false;
                })
            }else{
                HttpSaveShipper(this.formData).then(res => {
                    this.cancel();
                    this.$Message.success(res.message);
                }, err => {
                    this.$Message.error(err.message);
                }).finally(result => {
                    this.loading = false;
                })
            }

		},
		async getDetail() {
            console.log(this.id,this.activeid)
			this.loading = true;
			HttpShipper({ id: this.id }).then(res => {
				this.formData = { ...this.formData, ...res.data };
			}, err => {
				this.$Message.error(err.message);
			}).finally(result => {
				this.loading = false;
			})
		},
    }
}
</script>